<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>花龙腾航 - 机票预订</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f8fafc;
        }

        .logo-text {
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .user-avatar {
            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
        }
        .dropdown-menu {
            display: none;
            position: absolute;
            right: 0;
            top: 100%;
            background-color: white;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            min-width: 200px;
            z-index: 10;
        }

        .dropdown-menu.open {
            display: block;
        }

        .dropdown-item {
            padding: 0.5rem 1rem;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .dropdown-item:hover {
            background-color: #f3f4f6;
        }

        .flight-summary {
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            border-left: 4px solid #3b82f6;
        }

        .passenger-form {
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }

        .passenger-form:hover {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        .payment-method {
            border: 1px solid #e5e7eb;
            transition: all 0.2s;
        }

        .payment-method:hover {
            border-color: #3b82f6;
        }

        .payment-method.selected {
            border-color: #3b82f6;
            background-color: #f0f7ff;
        }

        .add-passenger-btn {
            transition: all 0.2s;
        }

        .add-passenger-btn:hover {
            transform: translateY(-2px);
        }

        .tab-active {
            border-bottom: 3px solid #3b82f6;
            color: #3b82f6;
            font-weight: 500;
        }

        .fade-in {
            animation: fadeIn 0.3s ease-in-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 新增样式 */
        .passenger-type-badge {
            position: absolute;
            top: -8px;
            right: -8px;
            color: white;
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
            border-radius: 9999px;
        }

        .remove-passenger-btn {
            transition: all 0.2s;
        }

        .remove-passenger-btn:hover {
            color: #ef4444;
            transform: scale(1.1);
        }

        .price-breakdown-item {
            border-bottom: 1px dashed #e5e7eb;
        }

        .price-breakdown-item:last-child {
            border-bottom: none;
        }

        .price-total {
            border-top: 2px solid #e5e7eb;
        }

        .cabin-option {
            transition: all 0.2s;
            cursor: pointer;
        }

        .cabin-option:hover {
            background-color: #f3f4f6;
        }

        .cabin-option.selected {
            background-color: #3b82f6;
            color: white;
        }

        .error-message {
            color: #ef4444;
            font-size: 0.75rem;
            margin-top: 0.25rem;
            display: none;
        }

        input.error, select.error {
            border-color: #ef4444;
        }

        /* 新增老人样式 */
        .senior-badge {
            background-color: #f59e0b;
        }

        /* 舱位选择样式 */
        .cabin-selection {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px dashed #e5e7eb;
        }

        /* 舱位座位不足样式 */
        .cabin-option.disabled {
            opacity: 0.5;
            cursor: not-allowed;
            background-color: #f3f4f6;
        }

        .seat-remaining {
            font-size: 0.75rem;
            color: #666;
            margin-top: 0.25rem;
        }

        .seat-remaining.low {
            color: #ef4444;
            font-weight: bold;
        }

        /* 新增生日错误提示样式 */
        .birthday-error {
            color: #ef4444;
            font-size: 0.75rem;
            margin-top: 0.25rem;
            display: none;
        }

        .birthday-error.show {
            display: block;
        }

        .passenger-form.error {
            border: 1px solid #ef4444;
            animation: shake 0.5s;
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
            20%, 40%, 60%, 80% { transform: translateX(5px); }
        }
    </style>
</head>
<body>
<!-- Navigation -->
<header class="bg-white shadow-sm">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
        <div class="flex items-center space-x-2">
            <i class="fas fa-plane text-3xl text-blue-500"></i>
            <h1 class="text-2xl font-bold logo-text">花龙腾航</h1>
        </div>
        <nav class="hidden md:flex space-x-6">
            <a href="user_index" class="text-gray-600 hover:text-blue-500">首页</a>
            <a href="#" class="text-blue-500 font-medium">机票预订</a>
            <a href="user_order" class="text-gray-600 hover:text-blue-500">我的订单</a>
            <a href="user_ticket" class="text-gray-600 hover:text-blue-500">我的机票</a>
            <a href="user_member_center" class="text-gray-600 hover:text-blue-500">会员中心</a>
        </nav>
        <div class="flex items-center space-x-4">
            <!-- 用户菜单 -->
            <div class="flex items-center space-x-2 cursor-pointer group relative" id="user-menu">
                <div class="w-8 h-8 rounded-full user-avatar overflow-hidden">
                    <img th:if="${imageExists}" th:src="'static/images/'+${user.getU_id()}+'.jpg?version=' + ${#dates.createNow().time}" alt="用户头像" class="w-full h-full object-cover">
                    <img th:if="${!imageExists} and ${user.getSex()} == '女'" src="https://randomuser.me/api/portraits/women/44.jpg" alt="用户头像" class="w-full h-full object-cover">
                    <img th:if="${!imageExists} and ${user.getSex()} == '男'" src="https://randomuser.me/api/portraits/men/71.jpg" alt="用户头像" class="w-full h-full object-cover">
                </div>
                <span class="hidden md:inline text-gray-700 group-hover:text-blue-500" th:text="${user.getU_name()}">张先生</span>
                <div class="dropdown-menu" id="dropdown-menu">
                    <div class="dropdown-item" onclick="location.href='user_profile'">
                        <i class="fas fa-user-cog mr-2"></i> 个人主页
                    </div>
                    <div class="dropdown-item" onclick="location.href='user_account_manage'">
                        <i class="fas fa-cog mr-2"></i> 账号管理
                    </div>
                    <div class="border-t border-gray-200 my-1"></div>
                    <div class="dropdown-item text-red-500" onclick="location.href='user_logout'">
                        <i class="fas fa-sign-out-alt mr-2"></i> 退出登录
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Main Content -->
<main class="container mx-auto px-4 py-8">
    <!-- Booking Progress -->
    <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="flex items-center space-x-4 w-full md:w-auto mb-4 md:mb-0">
                <div class="flex flex-col items-center">
                    <div class="h-8 w-8 rounded-full bg-blue-600 text-white flex items-center justify-center">1</div>
                    <span class="text-sm mt-1 text-blue-600 font-medium">选择航班</span>
                </div>
                <div class="h-1 w-16 bg-gray-200 hidden md:block"></div>
                <div class="flex flex-col items-center">
                    <div class="h-8 w-8 rounded-full bg-blue-600 text-white flex items-center justify-center">2</div>
                    <span class="text-sm mt-1 text-blue-600 font-medium">填写乘客信息</span>
                </div>
                <div class="h-1 w-16 bg-gray-200 hidden md:block"></div>
                <div class="flex flex-col items-center">
                    <div class="h-8 w-8 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center">3</div>
                    <span class="text-sm mt-1 text-gray-500">支付</span>
                </div>
            </div>
        </div>
        <p th:if="${booking_failure}" style="color: red; font-size: 0.9em; margin-top: 0.5em;">系统繁忙！请重新预订！</p>
        <p th:if="${exist}" style="color: red; font-size: 0.9em; margin-top: 0.5em;">所添加的乘客中已存在该航班的机票！</p>
        <p th:if="${no_later}" style="color: red; font-size: 0.9em; margin-top: 0.5em;">离起飞时间不足2小时，无法稍后支付！</p>
    </div>

    <form id="bookingForm" action="user_booking" method="post" onsubmit="return confirmSubmit()">
        <!-- Hidden fields for flight info -->
        <input type="hidden" name="flightId" th:value="${f_id}"
               th:attr="
               data-economy-price=${flight.getEconomy_price()},
               data-economy-child-price=${flight.getEconomy_child_price()},
               data-economy-senior-price=${flight.getEconomy_senior_price()},
               data-economy-infant-price=${flight.getEconomy_infant_price()},
               data-business-price=${flight.getBusiness_price()},
               data-business-child-price=${flight.getBusiness_child_price()},
               data-business-senior-price=${flight.getBusiness_senior_price()},
               data-business-infant-price=${flight.getBusiness_infant_price()},
               data-first-price=${flight.getFirst_price()},
               data-first-child-price=${flight.getFirst_child_price()},
               data-first-senior-price=${flight.getFirst_senior_price()},
               data-first-infant-price=${flight.getFirst_infant_price()},
               data-economy-seats=${flight.getEconomy_space()},
               data-business-seats=${flight.getBusiness_space()},
               data-first-seats=${flight.getFirst_space()}"
        >
        <input type="hidden" name="departureTime" th:value="${flight.getDeparture_time()}">
        <input type="hidden" name="arrivalTime" th:value="${flight.getArrival_time()}">
        <input type="hidden" name="departureDate" th:value="${flight.getDeparture_date()}">
        <input type="hidden" name="arrivalDate" th:value="${flight.getArrival_date()}">
        <input type="hidden" name="departureCity" th:value="${flight.getDeparture_city()}">
        <input type="hidden" name="arrivalCity" th:value="${flight.getArrival_city()}">
        <input type="hidden" name="duration" th:value="${flight.getDuration()}">
        <input type="hidden" name="aircraftModel" th:value="${flight.getF_model()}">

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Left Column - Flight Summary and Passenger Info -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Flight Summary -->
                <div class="bg-white rounded-xl p-6 flight-summary fade-in">
                    <h2 class="text-xl font-bold text-gray-800 mb-4">航班信息</h2>

                    <div class="flex items-center space-x-3 mb-4">
                        <img th:src="'static/airline/'+${flight.getF_airline()}+'.jpg?version=' + ${#dates.createNow().time}" alt="花龙腾航" class="h-10 w-10 rounded-full">
                        <div>
                            <h3 class="font-bold text-gray-800" th:text="${flight.getF_airline()}">花龙腾航</h3>
                            <p class="text-sm text-gray-500" th:text="${flight.getFlight_id()}+' · '+${flight.getF_model()}">HL888 · 波音787-9</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-3 gap-4">
                        <div class="text-center">
                            <div class="text-xl font-bold" th:text="${flight.getDeparture_time()}">08:30</div>
                            <div class="text-sm text-gray-500" th:text="${flight.getDeparture_date()}+'&nbsp;&nbsp;'+${flight.getDeparture_day()}">11月20日</div>
                            <div class="text-xs text-gray-500 mt-1" th:text="${flight.getDeparture_city()}">北京(PEK)</div>
                            <div class="text-xs text-gray-500 mt-1" th:text="${flight.getDeparture_airport()}">北京(PEK)</div>
                        </div>

                        <div class="text-center">
                            <div class="text-sm text-gray-500 mb-6" th:text="${flight.getDuration()}">1小时45分钟</div>
                            <div class="relative px-4">
                                <div class="absolute top-1/2 left-0 right-0 h-px bg-gray-200"></div>
                                <i class="fas fa-plane text-blue-500 bg-white px-2 relative"></i>
                            </div>
                            <div class="text-xs text-blue-500 mt-6">直飞</div>
                        </div>

                        <div class="text-center">
                            <div class="text-xl font-bold" th:text="${flight.getArrival_time()}">10:15</div>
                            <div class="text-sm text-gray-500" th:text="${flight.getArrival_date()}+'&nbsp;&nbsp;'+${flight.getArrival_date()}">11月20日</div>
                            <div class="text-xs text-gray-500 mt-1" th:text="${flight.getArrival_city()}">上海(SHA)</div>
                            <div class="text-xs text-gray-500 mt-1" th:text="${flight.getArrival_airport()}">上海(SHA)</div>
                        </div>
                    </div>

                    <div class="mt-6 pt-4 border-t border-gray-200">
                        <div class="flex justify-between items-center">
                            <div>
                                <span class="text-sm text-gray-600">行李额度:</span>
                                <span class="ml-2 font-medium" th:text="'1件'+${flight.getBaggage_limit()}+'kg'">1件23kg</span>
                            </div>
                            <div>
                                <span class="text-sm text-gray-600">餐食:</span>
                                <span class="ml-2 font-medium" th:text="${flight.getMeal_money()}+' - '+${flight.getMeal()}">免费餐食</span>
                            </div>
                        </div>
                    </div>

                    <!-- 显示不同舱位的价格 -->
                    <div class="mt-6 pt-4 border-t border-gray-200">
                        <h3 class="text-lg font-medium text-gray-800 mb-4">舱位价格</h3>
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div class="bg-gray-50 p-3 rounded-lg">
                                <div class="font-medium">经济舱</div>
                                <div class="seat-remaining" th:classappend="${flight.getEconomy_space()} <= 5 ? 'low' : ''"
                                     th:text="'剩余座位: ' + ${flight.getEconomy_space()} + '个'">剩余座位: 20个</div>
                                <div class="text-sm text-gray-600">
                                    <div>成人: <span th:name="data-economy-price" th:value="${flight.getEconomy_price()}" th:text="'¥'+${flight.getEconomy_price()}">¥1,280</span></div>
                                    <div>儿童: <span th:text="'¥'+${flight.getEconomy_child_price()}">¥980</span></div>
                                    <div>老人: <span th:text="'¥'+${flight.getEconomy_senior_price()}">¥980</span></div>
                                    <div>婴儿: <span th:text="'¥'+${flight.getEconomy_infant_price()}">¥200</span></div>
                                </div>
                            </div>
                            <div class="bg-gray-50 p-3 rounded-lg">
                                <div class="font-medium">商务舱</div>
                                <div class="seat-remaining" th:classappend="${flight.getBusiness_space()} <= 5 ? 'low' : ''"
                                     th:text="'剩余座位: ' + ${flight.getBusiness_space()} + '个'">剩余座位: 10个</div>
                                <div class="text-sm text-gray-600">
                                    <div>成人: <span th:text="'¥'+${flight.getBusiness_price()}">¥3,280</span></div>
                                    <div>儿童: <span th:text="'¥'+${flight.getBusiness_child_price()}">¥2,480</span></div>
                                    <div>老人: <span th:text="'¥'+${flight.getBusiness_senior_price()}">¥2,480</span></div>
                                    <div>婴儿: <span th:text="'¥'+${flight.getBusiness_infant_price()}">¥500</span></div>
                                </div>
                            </div>
                            <div class="bg-gray-50 p-3 rounded-lg">
                                <div class="font-medium">头等舱</div>
                                <div class="seat-remaining" th:classappend="${flight.getFirst_space()} <= 5 ? 'low' : ''"
                                     th:text="'剩余座位: ' + ${flight.getFirst_space()} + '个'">剩余座位: 5个</div>
                                <div class="text-sm text-gray-600">
                                    <div>成人: <span th:text="'¥'+${flight.getFirst_price()}">¥4,980</span></div>
                                    <div>儿童: <span th:text="'¥'+${flight.getFirst_child_price()}">¥3,980</span></div>
                                    <div>老人: <span th:text="'¥'+${flight.getFirst_senior_price()}">¥3,980</span></div>
                                    <div>婴儿: <span th:text="'¥'+${flight.getFirst_infant_price()}">¥800</span></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Passenger Information -->
                <div class="bg-white rounded-xl p-6 fade-in">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-xl font-bold text-gray-800">乘客信息</h2>
                        <div class="text-sm text-gray-500">
                            <span>已添加</span>
                            <span id="passengerCount" class="font-medium mx-1">0</span>
                            <span>位乘客</span>
                        </div>
                    </div>

                    <!-- Passenger Forms -->
                    <div id="passengerForms">
                        <!-- 初始状态下没有乘客 -->
                    </div>

                    <!-- Add Passenger Buttons -->
                    <div class="grid grid-cols-1 md:grid-cols-4 gap-3 mt-4">
                        <button type="button" id="addAdult" class="add-passenger-btn bg-white border border-blue-500 text-blue-500 py-2 px-4 rounded-lg flex items-center justify-center hover:bg-blue-50">
                            <i class="fas fa-user mr-2"></i> 添加成人
                        </button>
                        <button type="button" id="addChild" class="add-passenger-btn bg-white border border-purple-500 text-purple-500 py-2 px-4 rounded-lg flex items-center justify-center hover:bg-purple-50">
                            <i class="fas fa-child mr-2"></i> 添加儿童
                        </button>
                        <button type="button" id="addSenior" class="add-passenger-btn bg-white border border-yellow-500 text-yellow-500 py-2 px-4 rounded-lg flex items-center justify-center hover:bg-yellow-50">
                            <i class="fas fa-user-tie mr-2"></i> 添加老人
                        </button>
                        <button type="button" id="addInfant" class="add-passenger-btn bg-white border border-pink-500 text-pink-500 py-2 px-4 rounded-lg flex items-center justify-center hover:bg-pink-50">
                            <i class="fas fa-baby mr-2"></i> 添加婴儿
                        </button>
                    </div>

                    <!-- Contact Information -->
                    <!--div class="mt-8 pt-6 border-t border-gray-200">
                        <h3 class="text-lg font-medium text-gray-800 mb-4">联系人信息</h3>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">联系人姓名 <span class="text-red-500">*</span></label>
                                <input type="text" name="contactName" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="请输入联系人姓名" required>
                                <div class="error-message">请输入联系人姓名</div>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">手机号码 <span class="text-red-500">*</span></label>
                                <input type="tel" name="contactPhone" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="用于接收订单信息" required>
                                <div class="error-message">请输入手机号码</div>
                            </div>
                        </div>
                    </div-->
                </div>
            </div>

            <!-- Right Column - Price Summary and Payment -->
            <div class="space-y-6">
                <!-- Price Summary -->
                <div class="bg-white rounded-xl p-6 shadow-sm fade-in">
                    <h2 class="text-xl font-bold text-gray-800 mb-4">费用明细</h2>

                    <div class="space-y-3" id="priceBreakdown">
                        <div class="price-breakdown-item pb-3">
                            <div class="flex justify-between">
                                <span class="text-gray-600"><span id="adultCount">0</span>位成人 × <span id="adultPrice">¥0</span></span>
                                <span class="font-medium" id="adultTotal">¥0</span>
                            </div>
                        </div>

                        <div class="price-breakdown-item pb-3">
                            <div class="flex justify-between">
                                <span class="text-gray-600"><span id="childCount">0</span>位儿童 × <span id="childPrice">¥0</span></span>
                                <span class="font-medium" id="childTotal">¥0</span>
                            </div>
                        </div>

                        <div class="price-breakdown-item pb-3">
                            <div class="flex justify-between">
                                <span class="text-gray-600"><span id="seniorCount">0</span>位老人 × <span id="seniorPrice">¥0</span></span>
                                <span class="font-medium" id="seniorTotal">¥0</span>
                            </div>
                        </div>

                        <div class="price-breakdown-item pb-3">
                            <div class="flex justify-between">
                                <span class="text-gray-600"><span id="infantCount">0</span>位婴儿 × <span id="infantPrice">¥0</span></span>
                                <span class="font-medium" id="infantTotal">¥0</span>
                            </div>
                        </div>

                        <div class="price-breakdown-item pb-3">
                            <div class="flex justify-between">
                                <span class="text-gray-600">机场建设费</span>
                                <span class="font-medium" id="airportTax">¥0</span>
                            </div>
                        </div>

                        <div class="price-breakdown-item pb-3">
                            <div class="flex justify-between">
                                <span class="text-gray-600">燃油附加费</span>
                                <span class="font-medium" id="fuelSurcharge">¥0</span>
                            </div>
                        </div>

                        <div class="price-breakdown-item pb-3">
                            <div class="flex justify-between">
                                <span class="text-gray-600">保险费</span>
                                <span class="font-medium" id="insurance">¥0</span>
                            </div>
                        </div>

                        <div class="price-total pt-3 mt-3">
                            <div class="flex justify-between">
                                <span class="text-lg font-bold text-gray-800">总价</span>
                                <span class="text-xl font-bold text-blue-600" id="totalPrice">¥0</span>
                            </div>
                        </div>
                    </div>

                    <div class="mt-6 pt-4 border-t border-gray-200">
                        <div class="flex items-center text-sm text-gray-600">
                            <i class="fas fa-shield-alt text-blue-500 mr-2"></i>
                            <span>花龙腾航保障: 航班变动免费退改</span>
                        </div>
                    </div>
                </div>

                <!-- Payment Options -->
                <div class="bg-white rounded-xl p-6 shadow-sm fade-in">
                    <h2 class="text-xl font-bold text-gray-800 mb-4">支付方式</h2>
                    <p th:if="${money_not_enough}" style="color: red; font-size: 0.9em; margin-top: 0.5em;">余额不足！请更换支付方式或稍后支付！</p>

                    <div class="space-y-3">
                        <div class="payment-method p-4 rounded-lg cursor-pointer" data-payment="alipay">
                            <div class="flex items-center">
                                <div class="h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                                    <i class="fab fa-alipay text-blue-600 text-xl"></i>
                                </div>
                                <span class="font-medium">支付宝支付</span>
                                <input type="radio" name="paymentMethod" value="alipay" class="hidden">
                            </div>
                        </div>

                        <div class="payment-method p-4 rounded-lg cursor-pointer" data-payment="wechat">
                            <div class="flex items-center">
                                <div class="h-10 w-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
                                    <i class="fab fa-weixin text-green-600 text-xl"></i>
                                </div>
                                <span class="font-medium">微信支付</span>
                                <input type="radio" name="paymentMethod" value="wechat" class="hidden">
                            </div>
                        </div>

                        <div class="payment-method p-4 rounded-lg cursor-pointer" data-payment="unionpay">
                            <div class="flex items-center">
                                <div class="h-10 w-10 bg-red-100 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-credit-card text-red-600 text-xl"></i>
                                </div>
                                <span class="font-medium">银联支付</span>
                                <input type="radio" name="paymentMethod" value="unionpay" class="hidden">
                            </div>
                        </div>

                        <div class="payment-method p-4 rounded-lg cursor-pointer selected" data-payment="later">
                            <div class="flex items-center">
                                <div class="h-10 w-10 bg-gray-100 rounded-full flex items-center justify-center mr-3">
                                    <i class="far fa-clock text-gray-600 text-xl"></i>
                                </div>
                                <span class="font-medium">稍后支付</span>
                                <input type="radio" name="paymentMethod" value="later" checked class="hidden">
                            </div>
                        </div>
                    </div>

                    <!-- Terms and Conditions -->
                    <div class="mt-6 pt-4 border-t border-gray-200">
                        <div class="flex items-start">
                            <input type="checkbox" id="terms" name="agreeTerms" class="mt-1 mr-2" checked required>
                            <label for="terms" class="text-sm text-gray-600">
                                我已阅读并同意 <a href="#" class="text-blue-500 hover:underline">《花龙腾航机票预订协议》</a> 和
                                <a href="#" class="text-blue-500 hover:underline">《个人信息保护政策》</a>
                            </label>
                            <div class="error-message">请同意条款</div>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="mt-6 grid grid-cols-2 gap-4">
                        <button type="button" id="cancelBooking" class="bg-white border border-gray-300 text-gray-700 py-3 px-4 rounded-lg font-medium hover:bg-gray-50">
                            取消预订
                        </button>
                        <button type="submit" id="submitBooking" class="bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-lg font-medium transition duration-300">
                            提交订单
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</main>

<!-- Footer -->
<footer class="bg-gray-50 mt-12">
    <div class="container mx-auto px-4 py-8">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
                <div class="flex items-center space-x-2 mb-4">
                    <i class="fas fa-plane text-2xl text-blue-500"></i>
                    <h3 class="text-xl font-bold logo-text">花龙腾航</h3>
                </div>
                <p class="text-gray-600 text-sm">花龙腾航，让您的每一次飞行都成为美好回忆。我们致力于提供安全、舒适、便捷的航空服务。</p>
            </div>
            <div>
                <h4 class="font-bold text-gray-800 mb-4">关于我们</h4>
                <ul class="space-y-2 text-sm text-gray-600">
                    <li><a href="public_company_profile" class="hover:text-blue-500 transition">公司简介</a></li>
                    <li><a href="public_company_profile" class="hover:text-blue-500 transition">企业文化</a></li>
                    <li><a href="public_company_profile" class="hover:text-blue-500 transition">发展历程</a></li>
                    <li><a href="public_job_posting" class="hover:text-blue-500 transition">招贤纳士</a></li>
                </ul>
            </div>
            <div>
                <h4 class="font-bold text-gray-800 mb-4">帮助中心</h4>
                <ul class="space-y-2 text-sm text-gray-600">
                    <li><a href="public_faq" class="hover:text-blue-500 transition">常见问题</a></li>
                    <li><a href="public_baggage_regulations" class="hover:text-blue-500 transition">行李规定</a></li>
                    <li><a href="public_company_profile" class="hover:text-blue-500 transition">航班动态</a></li>
                    <li><a href="public_callus" class="hover:text-blue-500 transition">联系客服</a></li>
                </ul>
            </div>
            <div>
                <h4 class="font-bold text-gray-800 mb-4">联系我们</h4>
                <ul class="space-y-2 text-sm text-gray-600">
                    <li class="flex items-center"><i class="fas fa-phone-alt mr-2 text-blue-500"></i> 客服热线: 19976338635</li>
                    <li class="flex items-center"><i class="fas fa-envelope mr-2 text-blue-500"></i> ganshenghao888@qq.com</li>
                    <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2 text-blue-500"></i> 广东省广州市天河区华南农业大学</li>
                </ul>
                <div class="flex space-x-4 mt-4">
                    <a href="https://weixin.com" class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 hover:bg-blue-200 transition">
                        <i class="fab fa-weixin"></i>
                    </a>
                    <a href="https://weibo.com" class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 hover:bg-blue-200 transition">
                        <i class="fab fa-weibo"></i>
                    </a>
                    <a href="https://qq.com" class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-500 hover:bg-blue-200 transition">
                        <i class="fab fa-qq"></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="border-t border-gray-200 mt-8 pt-6 text-center text-sm text-gray-500">
            <p>© 2025 花龙腾航航空公司 版权所有 | 京ICP备12345678号</p>
        </div>
    </div>
</footer>

<script>
    // Toggle user dropdown menu
    document.getElementById('user-menu').addEventListener('click', function(event) {
        event.stopPropagation();
        document.getElementById('dropdown-menu').classList.toggle('open');
    });

    // Close dropdown when clicking outside
    document.addEventListener('click', function(event) {
        const dropdown = document.getElementById('dropdown-menu');
        const userMenu = document.getElementById('user-menu');

        if (!userMenu.contains(event.target) && !dropdown.contains(event.target)) {
            dropdown.classList.remove('open');
        }
    });

    // Payment method selection
    document.querySelectorAll('.payment-method').forEach(method => {
        method.addEventListener('click', function() {
            document.querySelectorAll('.payment-method').forEach(m => {
                m.classList.remove('selected');
            });
            this.classList.add('selected');
            this.querySelector('input[type="radio"]').checked = true;
        });
    });

    // 价格数据从Thymeleaf读取
    const prices = {
        economy: {
            adult: parseInt(document.querySelector('input[name="flightId"]').getAttribute('data-economy-price') || '1280'),
            child: parseInt(document.querySelector('input[name="flightId"]').getAttribute('data-economy-child-price') || '980'),
            senior: parseInt(document.querySelector('input[name="flightId"]').getAttribute('data-economy-senior-price') || '980'),
            infant: parseInt(document.querySelector('input[name="flightId"]').getAttribute('data-economy-infant-price') || '200')
        },
        business: {
            adult: parseInt(document.querySelector('input[name="flightId"]').getAttribute('data-business-price') || '3280'),
            child: parseInt(document.querySelector('input[name="flightId"]').getAttribute('data-business-child-price') || '2480'),
            senior: parseInt(document.querySelector('input[name="flightId"]').getAttribute('data-business-senior-price') || '2480'),
            infant: parseInt(document.querySelector('input[name="flightId"]').getAttribute('data-business-infant-price') || '500')
        },
        first: {
            adult: parseInt(document.querySelector('input[name="flightId"]').getAttribute('data-first-price') || '4980'),
            child: parseInt(document.querySelector('input[name="flightId"]').getAttribute('data-first-child-price') || '3980'),
            senior: parseInt(document.querySelector('input[name="flightId"]').getAttribute('data-first-senior-price') || '3980'),
            infant: parseInt(document.querySelector('input[name="flightId"]').getAttribute('data-first-infant-price') || '800')
        },
        airportTax: 50,
        fuelSurcharge: 60,
        insurance: 30
    };

    // 舱位座位数
    const seatAvailability = {
        economy: parseInt(document.querySelector('input[name="flightId"]').getAttribute('data-economy-seats') || '20'),
        business: parseInt(document.querySelector('input[name="flightId"]').getAttribute('data-business-seats') || '10'),
        first: parseInt(document.querySelector('input[name="flightId"]').getAttribute('data-first-seats') || '5')
    };

    // Passenger counts
    let passengerCounts = {
        adult: 0,
        child: 0,
        senior: 0,
        infant: 0
    };

    // 已选择的舱位座位数
    let selectedSeats = {
        economy: 0,
        business: 0,
        first: 0
    };

    // Add passenger functionality
    document.getElementById('addAdult').addEventListener('click', function() {
        addPassenger('adult', '成人', 'bg-blue-100 text-blue-600');
        passengerCounts.adult++;
        updatePassengerCounts();
        calculateTotal();
    });

    document.getElementById('addChild').addEventListener('click', function() {
        addPassenger('child', '儿童', 'bg-purple-100 text-purple-600');
        passengerCounts.child++;
        updatePassengerCounts();
        calculateTotal();
    });

    document.getElementById('addSenior').addEventListener('click', function() {
        addPassenger('senior', '老人', 'bg-yellow-100 text-yellow-600');
        passengerCounts.senior++;
        updatePassengerCounts();
        calculateTotal();
    });

    document.getElementById('addInfant').addEventListener('click', function() {
        addPassenger('infant', '婴儿', 'bg-pink-100 text-pink-600');
        passengerCounts.infant++;
        updatePassengerCounts();
        calculateTotal();
    });

    function addPassenger(type, label, badgeClass) {
        const passengerForms = document.getElementById('passengerForms');
        const newIndex = document.querySelectorAll('.passenger-form').length;

        const passengerForm = document.createElement('div');
        passengerForm.className = `passenger-form bg-gray-50 rounded-lg p-4 mb-4 relative fade-in`;
        passengerForm.setAttribute('data-passenger-type', type);

        passengerForm.innerHTML = `
            <div class="passenger-type-badge ${badgeClass}">${label}</div>

            <div class="flex justify-between items-center mb-3">
                <h3 class="font-medium text-gray-800">乘客 #${newIndex + 1}</h3>
                <button type="button" class="remove-passenger-btn text-gray-400 hover:text-red-500">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">姓名 <span class="text-red-500">*</span></label>
                    <input type="text" name="passengers[${newIndex}].Name" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="如: 张" required>
                    <div class="error-message">请输入姓名</div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">出生日期 <span class="text-red-500">*</span></label>
                    <input type="date" name="passengers[${newIndex}].birthDate" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" required>
                    <div class="error-message">请选择出生日期</div>
                    <div class="birthday-error">出生日期与乘客类型不符</div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">证件类型 <span class="text-red-500">*</span></label>
                    <select name="passengers[${newIndex}].idType" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" required>
                        <option value="身份证">身份证</option>
                        <option value="护照">护照</option>
                        <option value="港澳通行证">港澳通行证</option>
                        <option value="台湾通行证">台胞证</option>
                    </select>
                    <div class="error-message">请选择证件类型</div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">证件号码 <span class="text-red-500">*</span></label>
                    <input type="text" name="passengers[${newIndex}].idNumber" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" placeholder="请输入证件号码" required>
                    <div class="error-message">请输入证件号码</div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">性别 <span class="text-red-500">*</span></label>
                    <select name="passengers[${newIndex}].gender" class="w-full p-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500" required>
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                    <div class="error-message">请选择性别</div>
                </div>
            </div>

            <!-- 舱位选择 -->
            <div class="cabin-selection">
                <h4 class="text-sm font-medium text-gray-700 mb-2">选择舱位</h4>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-2">
                    <div class="cabin-option p-2 rounded border border-gray-200 text-center" data-cabin="economy" data-passenger-type="${type}">
                        <div class="font-medium">经济舱</div>
                        <div class="text-xs text-gray-600" id="economy-price-${newIndex}">¥${prices.economy[type].toLocaleString()}</div>
                        <div class="seat-remaining" id="economy-seats-${newIndex}">剩余座位: ${seatAvailability.economy}个</div>
                        <input type="radio" name="passengers[${newIndex}].cabinClass" value="经济舱" class="hidden" ${seatAvailability.economy <= 0 ? 'disabled' : 'checked'}>
                    </div>
                    <div class="cabin-option p-2 rounded border border-gray-200 text-center" data-cabin="business" data-passenger-type="${type}">
                        <div class="font-medium">商务舱</div>
                        <div class="text-xs text-gray-600" id="business-price-${newIndex}">¥${prices.business[type].toLocaleString()}</div>
                        <div class="seat-remaining" id="business-seats-${newIndex}">剩余座位: ${seatAvailability.business}个</div>
                        <input type="radio" name="passengers[${newIndex}].cabinClass" value="商务舱" class="hidden" ${seatAvailability.business <= 0 ? 'disabled' : ''}>
                    </div>
                    <div class="cabin-option p-2 rounded border border-gray-200 text-center" data-cabin="first" data-passenger-type="${type}">
                        <div class="font-medium">头等舱</div>
                        <div class="text-xs text-gray-600" id="first-price-${newIndex}">¥${prices.first[type].toLocaleString()}</div>
                        <div class="seat-remaining" id="first-seats-${newIndex}">剩余座位: ${seatAvailability.first}个</div>
                        <input type="radio" name="passengers[${newIndex}].cabinClass" value="头等舱" class="hidden" ${seatAvailability.first <= 0 ? 'disabled' : ''}>
                    </div>
                </div>
            </div>
        `;

        passengerForms.appendChild(passengerForm);

        // 为新增乘客的舱位选项添加点击事件
        passengerForm.querySelectorAll('.cabin-option').forEach(option => {
            const cabinType = option.getAttribute('data-cabin');

            // 检查座位是否已满
            if (seatAvailability[cabinType] <= 0) {
                option.classList.add('disabled');
                option.querySelector('input[type="radio"]').disabled = true;
            }

            option.addEventListener('click', function() {
                if (this.classList.contains('disabled')) return;

                const parentForm = this.closest('.passenger-form');
                parentForm.querySelectorAll('.cabin-option').forEach(o => {
                    o.classList.remove('selected');
                });
                this.classList.add('selected');
                this.querySelector('input[type="radio"]').checked = true;

                // 重新计算总价
                calculateTotal();
            });

            // 默认选中经济舱（如果可用）
            if (option.getAttribute('data-cabin') === 'economy' && seatAvailability.economy > 0) {
                option.classList.add('selected');
                option.querySelector('input[type="radio"]').checked = true;
            }
        });

        // 为出生日期添加事件监听器
        const birthDateInput = passengerForm.querySelector('input[type="date"]');
        birthDateInput.addEventListener('change', function() {
            validatePassengerType(passengerForm);
        });

        // Add event listener to the new remove button
        passengerForm.querySelector('.remove-passenger-btn').addEventListener('click', function() {
            const passengerType = passengerForm.getAttribute('data-passenger-type');
            passengerCounts[passengerType]--;

            // 获取当前乘客选择的舱位类型
            const selectedCabin = passengerForm.querySelector('.cabin-option.selected');
            if (selectedCabin) {
                const cabinType = selectedCabin.getAttribute('data-cabin');
                selectedSeats[cabinType]--;
            }

            passengerForm.classList.add('hidden');
            setTimeout(() => {
                passengerForm.remove();
                updatePassengerCounts();
                calculateTotal();

                // Update passenger numbers
                document.querySelectorAll('.passenger-form').forEach((form, index) => {
                    form.querySelector('h3').textContent = `乘客 #${index + 1}`;
                    // Update the name attributes to maintain sequential numbering
                    const inputs = form.querySelectorAll('input, select');
                    inputs.forEach(input => {
                        const name = input.getAttribute('name').replace(/\[\d+\]/, `[${index}]`);
                        input.setAttribute('name', name);
                    });
                });
            }, 300);
        });
    }

    // 验证乘客类型与出生日期是否匹配
    function validatePassengerType(passengerForm) {
        const birthDateInput = passengerForm.querySelector('input[type="date"]');
        const passengerType = passengerForm.getAttribute('data-passenger-type');
        const errorElement = passengerForm.querySelector('.birthday-error');

        if (!birthDateInput.value) {
            errorElement.classList.remove('show');
            passengerForm.classList.remove('error');
            return true;
        }

        const birthDate = new Date(birthDateInput.value);
        const today = new Date();
        const age = today.getFullYear() - birthDate.getFullYear();
        const monthDiff = today.getMonth() - birthDate.getMonth();

        // 调整年龄，如果生日还没到
        if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
            age--;
        }

        let isValid = true;
        let errorMessage = '';

        switch(passengerType) {
            case 'adult':
                if (age < 12) {
                    isValid = false;
                    errorMessage = '成人乘客年龄应大于12岁';
                } else if (age >= 60) {
                    isValid = false;
                    errorMessage = '60岁及以上乘客应选择老人类型';
                }
                break;
            case 'child':
                if (age >= 12) {
                    isValid = false;
                    errorMessage = '儿童乘客年龄应小于12岁';
                } else if (age < 2) {
                    isValid = false;
                    errorMessage = '2岁以下乘客应选择婴儿类型';
                }
                break;
            case 'senior':
                if (age < 60) {
                    isValid = false;
                    errorMessage = '老人乘客年龄应大于60岁';
                }
                break;
            case 'infant':
                if (age >= 2) {
                    isValid = false;
                    errorMessage = '婴儿乘客年龄应小于2岁';
                }
                break;
        }

        if (!isValid) {
            errorElement.textContent = errorMessage;
            errorElement.classList.add('show');
            passengerForm.classList.add('error');
            return false;
        } else {
            errorElement.classList.remove('show');
            passengerForm.classList.remove('error');
            return true;
        }
    }

    // Update passenger counts display
    function updatePassengerCounts() {
        const totalPassengers = passengerCounts.adult + passengerCounts.child + passengerCounts.senior + passengerCounts.infant;
        document.getElementById('passengerCount').textContent = totalPassengers;

        document.getElementById('adultCount').textContent = passengerCounts.adult;
        document.getElementById('childCount').textContent = passengerCounts.child;
        document.getElementById('seniorCount').textContent = passengerCounts.senior;
        document.getElementById('infantCount').textContent = passengerCounts.infant;
    }

    // Calculate total price
    function calculateTotal() {
        let adultTotal = 0;
        let childTotal = 0;
        let seniorTotal = 0;
        let infantTotal = 0;

        // 重置已选择的舱位座位数
        selectedSeats = {
            economy: 0,
            business: 0,
            first: 0
        };

        // 计算每位乘客的价格
        document.querySelectorAll('.passenger-form').forEach(form => {
            const type = form.getAttribute('data-passenger-type');
            const selectedCabin = form.querySelector('.cabin-option.selected');
            if (!selectedCabin) return;

            const cabinType = selectedCabin.getAttribute('data-cabin');
            const price = prices[cabinType][type];

            // 更新已选择的舱位座位数
            selectedSeats[cabinType]++;

            // 根据乘客类型累加总价
            switch(type) {
                case 'adult':
                    adultTotal += price;
                    break;
                case 'child':
                    childTotal += price;
                    break;
                case 'senior':
                    seniorTotal += price;
                    break;
                case 'infant':
                    infantTotal += price;
                    break;
            }
        });

        // 计算税费和保险费（老人和成人一样计算）
        const totalTaxablePassengers = passengerCounts.adult + passengerCounts.child + passengerCounts.senior;
        const airportTaxTotal = totalTaxablePassengers * prices.airportTax;
        const fuelSurchargeTotal = totalTaxablePassengers * prices.fuelSurcharge;
        const insuranceTotal = totalTaxablePassengers * prices.insurance;

        // Update display
        document.getElementById('adultTotal').textContent = '¥' + adultTotal.toLocaleString();
        document.getElementById('childTotal').textContent = '¥' + childTotal.toLocaleString();
        document.getElementById('seniorTotal').textContent = '¥' + seniorTotal.toLocaleString();
        document.getElementById('infantTotal').textContent = '¥' + infantTotal.toLocaleString();
        document.getElementById('airportTax').textContent = '¥' + airportTaxTotal.toLocaleString();
        document.getElementById('fuelSurcharge').textContent = '¥' + fuelSurchargeTotal.toLocaleString();
        document.getElementById('insurance').textContent = '¥' + insuranceTotal.toLocaleString();

        // 更新单价显示
        if (passengerCounts.adult > 0) {
            document.getElementById('adultPrice').textContent = '¥' + (adultTotal / passengerCounts.adult).toLocaleString();
        }
        if (passengerCounts.child > 0) {
            document.getElementById('childPrice').textContent = '¥' + (childTotal / passengerCounts.child).toLocaleString();
        }
        if (passengerCounts.senior > 0) {
            document.getElementById('seniorPrice').textContent = '¥' + (seniorTotal / passengerCounts.senior).toLocaleString();
        }
        if (passengerCounts.infant > 0) {
            document.getElementById('infantPrice').textContent = '¥' + (infantTotal / passengerCounts.infant).toLocaleString();
        }

        // Calculate and update total
        const total = adultTotal + childTotal + seniorTotal + infantTotal + airportTaxTotal + fuelSurchargeTotal + insuranceTotal;
        document.getElementById('totalPrice').textContent = '¥' + total.toLocaleString();

        // 更新所有乘客表单中的剩余座位数
        updateAllSeatAvailability();
    }

    // 更新所有乘客表单中的剩余座位数
    function updateAllSeatAvailability() {
        document.querySelectorAll('.passenger-form').forEach(form => {
            ['economy', 'business', 'first'].forEach(cabinType => {
                const remainingSeats = seatAvailability[cabinType] - selectedSeats[cabinType];
                const seatElements = form.querySelectorAll(`.seat-remaining[id$="${cabinType}-seats"]`);

                seatElements.forEach(el => {
                    el.textContent = `剩余座位: ${remainingSeats}个`;
                    if (remainingSeats <= 0) {
                        el.classList.add('low');
                    } else {
                        el.classList.remove('low');
                    }
                });

                // 更新舱位选项的可用状态
                const cabinOptions = form.querySelectorAll(`.cabin-option[data-cabin="${cabinType}"]`);
                cabinOptions.forEach(option => {
                    const radioInput = option.querySelector('input[type="radio"]');
                    if (remainingSeats <= 0 && !radioInput.checked) {
                        option.classList.add('disabled');
                        radioInput.disabled = true;
                    } else {
                        option.classList.remove('disabled');
                        radioInput.disabled = false;
                    }
                });
            });
        });
    }

    function confirmSubmit() {
        // 检查是否至少有一位乘客
        const totalPassengers = passengerCounts.adult + passengerCounts.child + passengerCounts.senior + passengerCounts.infant;
        if (totalPassengers === 0) {
            alert('请至少添加一位乘客');
            return false;
        }

        // 检查是否有乘客选择了不可用的舱位
        let hasInvalidSelection = false;
        document.querySelectorAll('.passenger-form').forEach(form => {
            const selectedCabin = form.querySelector('.cabin-option.selected');
            if (!selectedCabin) {
                hasInvalidSelection = true;
                return;
            }

            const cabinType = selectedCabin.getAttribute('data-cabin');
            if (seatAvailability[cabinType] <= 0) {
                hasInvalidSelection = true;
                return;
            }
        });

        if (hasInvalidSelection) {
            alert('有乘客选择了不可用的舱位，请重新选择');
            return false;
        }

        // 检查所有乘客的出生日期是否与类型匹配
        let hasInvalidPassengerType = false;
        document.querySelectorAll('.passenger-form').forEach(form => {
            if (!validatePassengerType(form)) {
                hasInvalidPassengerType = true;
            }
        });

        if (hasInvalidPassengerType) {
            alert('有乘客的出生日期与乘客类型不符，请检查并修正');
            return false;
        }

        if (confirm('确定要提交订单吗？')) {
            alert('订单已提交！');
            return true; // 允许表单提交
        } else {
            return false; // 阻止表单提交
        }
    }

    // Cancel booking
    document.getElementById('cancelBooking').addEventListener('click', function() {
        if (confirm('确定要取消本次预订吗？')) {
            const departureDate = document.querySelector('input[name="departureDate"]').value;
            const arrivalCity = document.querySelector('input[name="arrivalCity"]').value;
            const departureCity = document.querySelector('input[name="departureCity"]').value;

            // 构建重定向 URL 并包含 f_id 参数
            const redirectUrl = `user_flight_search?departureDate=${encodeURIComponent(departureDate)}&arrivalCity=${encodeURIComponent(arrivalCity)}&departureCity=${encodeURIComponent(departureCity)}`;
            // 重定向到新的 URL
            alert('预订已取消');
            window.location.href = redirectUrl;
        }
    });
</script>
</body>
</html>